<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h2>遍历对象的属性</h2>
        <ul>
            <!-- ta是值 index是对象名 -->
            <li v-for="(ta,index) of num1">
                {{index}},{{ta}}
            </li>
        </ul>
        <h2>遍历字符串</h2>
        <ul>
            <li v-for="(na,index) of num2">
                {{na}},{{index}}
            </li>
        </ul>
        <h1>遍历指定的次数</h1>
        <ul>
            <li v-for="(ma,index) of num3">
                {{ma}}{{index}}
            </li>
        </ul>
        <!-- 静态写法 -->
        <ul>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ul>
        <!-- 动态写法 -->
        <ul>
            <!-- 
                1.v-for要写在循环项上
                2，v-for的语法规则：
                v-for="变量 in/of数组"
                变量名：代表了 数组中的每一个元素
             -->
            <li v-for="num in name">
                {{num}}
            </li>
        </ul>
        <!-- 对象形式 -->
        <ul>
            <!-- name是变量名index是下标 -->
            <li v-for="(name,index) of vips">
                姓名是是：{{name.name}} 年龄是：{{name.age}}
            </li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '列表渲染',
                name: ['jack', 'pink', 'big'],
                vips: [
                    { name: 'jack', age: 18 },
                    { name: 'pink', age: 20 },
                    { name: 'red', age: 22 }
                ],
                num1: {
                    name: 'cyh',
                    age: 18,
                    title: '呵呵'
                },
                num2: 'cyh',
                num3: 10
            }
        })
    </script>
</body>

</html>